<template>
  <div class="app-container page-container">
    <SideMenu @onMenuClick="handleMenuClick" />
    <div class="content">
      <div class="operation-area">
        <el-button v-if="token" size="small" type="primary" icon="el-icon-plus" @click="title = '新增设备'; showDialog = true">新增</el-button>
        <el-input v-model="deviceName" placeholder="请输入统计对象名称" size="small" clearable class="search-value" />
        <el-button size="small" style="margin-left: 12px" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          highlight-current-row
          height="100%"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{
            background:'#6c89e7',color:'#000000'
          }"
          :row-style="handleRowStyle"
        >
          <el-table-column label="名称" prop="deviceName" width="300" />
          <el-table-column label="统计类型" prop="statisticalType" width="110" />
          <el-table-column label="统计值" prop="statisticalValue" width="110" />
          <el-table-column label="一级预警" prop="firstLevelWarning" width="110" :formatter="(row) => `${row.firstLevelWarning * 100}%`" />
          <el-table-column label="二级预警" prop="secondLevelWarning" width="110" :formatter="(row) => `${row.secondLevelWarning * 100}%`" />
          <el-table-column label="更换时间" prop="deviceReplacementTime" width="200" />
          <el-table-column label="品牌" prop="brand" width="200" />
          <el-table-column label="备注" prop="remark" width="200" />
          <el-table-column
            v-if="token"
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleModify(scope.row)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleReplace(scope.row)"
              >
                更换
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageNumber"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <DeviceDialog :title="title" :visible.sync="showDialog" :device-tree-id="deviceTreeId" :device-info="deviceInfo" @onSuccess="(e) => fetchData(e)" />
  </div>
</template>

<script>
import SideMenu from '../../../components/SideMenu/index'
import DeviceDialog from '@/components/DeviceDialog'
import { deleteDeviceById, queryDeviceListById } from '../../../api/device'
import { mapGetters } from 'vuex'

export default {
  name: 'Electrical',
  components: { DeviceDialog, SideMenu },
  data() {
    return {
      list: null,
      listLoading: false,
      showDialog: false,
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      deviceInfo: {},
      deviceTreeId: undefined,
      title: '新增设备',
      deviceName: ''
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {
    handleSearch() {
      this.fetchData(1)
    },
    fetchData(page) {
      this.listLoading = true
      queryDeviceListById({
        pageNumber: page || this.pageNumber,
        pageSize: this.pageSize,
        deviceTreeId: this.deviceTreeId,
        deviceName: this.deviceName
      }).then(({ data, success }) => {
        if (success) {
          this.list = data?.data || []
          this.total = data?.total || 0
          if (page) this.pageNumber = page
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleDelete(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceById({
          id: row.id
        }).then(({ success }) => {
          if (success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    tableRowClassName({ row }) {
      if (row.status === 1) {
        return 'warning-row'
      } else if (row.status === 2) {
        return 'error-row'
      }
      return ''
    },
    handleRowStyle({ _, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return {
          'background-color': '#cfd6e6'
        }
      }
      return {
        'background-color': '#e8ecf5'
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData(1)
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.fetchData()
    },
    handleMenuClick(item) {
      this.deviceTreeId = item.id
      this.fetchData(1)
    },
    handleReplace(row) {
      this.title = '更换设备'
      this.deviceInfo = { ...row, title: '更换设备' }
      this.showDialog = true
    },
    handleModify(row) {
      this.title = '修改设备'
      this.deviceInfo = { ...row, title: '修改设备' }
      this.showDialog = true
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background-color: #fdf6ec!important;
  color: #e6a23c!important;;
}

.el-table .error-row {
  background-color: #fef0f0!important;;
  color: #f56c6c!important;;
}
</style>
<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: row;
    .content {
      margin-left: 20px;
      overflow: hidden;
      .operation-area {
        margin-bottom: 16px;
        text-align: right;
        .search-value{
          width: 200px;
          margin-left: 12px;
        }
      }
      .table-container {
        height: calc(100vh - 225px);
      }
    }
  }
  .pagination-container {
    margin-top: 10px;
  }
</style>
